
Fragment 裡面,上部分是 ViewPager ,畫面下面的部分是 buttom navigation,透過點擊畫面下面的 buttom ,來對上面的 ViewPager 做切換,或是滑動上面的 ViewPager,也跟著切換畫面下面的 bottom focus。設定畫面下面的 buttom navigation 的監聽
private val onNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
viewPager.setCurrentItem(0, true)
return@OnNavigationItemSelectedListener true
}
R.id.navigation_dashboard -> {
viewPager.setCurrentItem(1, true)
return@OnNavigationItemSelectedListener true
}
R.id.navigation_notifications -> {
viewPager.setCurrentItem(2, true)
return@OnNavigationItemSelectedListener true
}
}
false
}
這樣在按下畫面下面的 navigation button 的時候,會去把 viewPager 選到特定的頁面
在 viewpager 的 adapter 設定該回傳的 fragment
接續上述的功能,要實作出 viewPager 這個完整的功能,需要一個 BaseAdapter。這個 Adapter 簡單來講,就是一個把程式裡面的資料,跟外面的 viewPager 前端的樣式做綁定的地方。ViewPager 必須要知道一共有幾頁要呈現 (getCount()),以及怎麼呈現 (getItem) 。這個專案是希望按下畫面下面的 Navigation button 之後,ViewPager 去做更換,而上面已經處理了按下 button 之後,會跟 ViewPager 說,現在請顯示出第某某張 page,而 ViewPager 收到目前應該顯示的 position,就會進入以下的程式碼。
下面程式碼,ViewPager 會得到一個 Fragment ,並把它顯示在螢幕上面
override fun getItem(position: Int): Fragment {
Log.d("", "in newInstance")
when(position){
0->return pageFragment.newInstance(movies[position])
1->return pageFragment.newInstance(movies[position])
2->return pageFragment.newInstance(movies[position])
else->return pageFragment.newInstance(movies[position])
}
}
Pager 該呈現哪些東西 (fragment)
這邊的 demo 很簡單,就是呈現電影的名稱(TextView)而已。這些電影名稱是放在一個 ArrayList<datas>,其中的 datas 是 data-class 的型別,簡單來講就是一個可以自定義的型別(很像 C++ 裡面的 Struct)。
整個流程是這樣,我先有一個充滿三筆 String 的 ArrayList,這個 ArrayList 會被放入 Adapter,去做資料綁定的動作(ArrayList 裡面的東西綁到特定 TextView 上面),綁的動作就是把資料,透過 fragment 的 newInstance 去回傳一個綁好的 fragment
class pageFragment : Fragment() {
companion object {
fun newInstance(message: datas): pageFragment {
val f = pageFragment()
f.fragTitle = message.titleText
val bdl = Bundle()
bdl.putParcelable(f.FRAG_DATAS, message)
f.arguments = bdl
return f
}
}